<!--
 * @Author: lmq
 * @Date: 2023-11-07 11:35:23
 * @LastEditTime: 2023-11-16 15:53:02
-->
<script setup>
  import { ref, reactive } from 'vue'
  import { Edit } from "@element-plus/icons-vue";
  import { ElMessage } from 'element-plus'
  import Qs from 'qs'
  import { getDisinfectantList, addDisinfectant, delDisinfectant } from "@/api/baseConfig.js"
  import tablePageSetting from "@/hooks/index.js"
  import formSetting from "@/views/baseConfig/form.js"
  const { headerStyle, tableData, page, query, total, date, loading, handleCurrentChange, getList, handelConfirmFun, handleSearch, handleReset } = tablePageSetting(getDisinfectantList);
  const { type, editVisible, btnLoading, ruleFormRef, form, addItem, handleEdit, submitForm, resetForm } = formSetting(getList, addDisinfectant);
  const size = ref("large");
  const showPage = ref(false) //分页只有一页时是否显示 
  const rules = reactive({
    operator: [
      { required: true, message: '请输入操作人', trigger: 'blur' },
    ],
    checkDate: [
      { required: true, message: '请选择检测日期', trigger: 'change' },
    ],
    checkResult: [
      { required: true, message: '请选择检测结果', trigger: 'change' },
    ],
    replace: [
      { required: true, message: '请选择是否更换', trigger: 'change' },
    ],
  })
  // 导出数据
  const handelExport = () => {
    let baseURL = import.meta.env.VITE_APP_WEWORK_LINK;
    let url = `${baseURL}/disinfectant/export?${Qs.stringify(query.value)}`;
    window.location.href = url
  }
  // 删除数据
  const handelDelete = (e) => {
    let { row } = e;
    if (!row.id) return;
    btnLoading.value = true;
    delDisinfectant({
      id: row.id
    })
      .then(res => {
        if (res.code == 0) {
          ElMessage.success(`操作成功`);
          if (page.page > 1 && tableData.value.length < 2) page.page = page.page - 1;
          getList();
        } else {
          ElMessage.error(res.message);
        }
      })
      .finally(() => {
        btnLoading.value = false;
      });
  }
  onMounted(() => {
    getList();
  })
  // 日期变动触发事件
  const handelChange = (e) => {
    query.value.minCheckDate = e && e.length > 0 ? e[0] : "";
    query.value.maxCheckDate = e && e.length > 1 ? e[1] : "";
    getList();
  }
</script>

<template>
  <div class="pad-25 bg-fff heiall">
    <div class="handle-box flex align-center">
      <el-button type="primary" class="handle-del mar-r-10" size="large" @click="addItem" :size="size">新建
      </el-button>
      <el-input v-model.trim="query.keyword" placeholder="请输入操作人姓名" class="handle-input mar-r-10" :size="size"
        clearable>
      </el-input>
      <el-select v-model="query.replace" placeholder="请选择是否更换" class="mar-r-10" :size="size" clearable>
        <el-option label="是" :value="1" />
        <el-option label="否" :value="0" />
      </el-select>
      <el-select v-model="query.checkResult" placeholder="请选择检测结果" class="mar-r-10" :size="size" clearable>
        <el-option label="正常" :value="1" />
        <el-option label="异常" :value="0" />
      </el-select>
      <el-date-picker v-model="date" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :size="size"
        class="mar-r-10" style="flex: initial;" value-format="YYYY-MM-DD" @change="handelChange" />
      <el-button type="primary" @click="handleSearch" :size="size">筛选
      </el-button>
      <el-button type="primary" :size="size" plain @click="handleReset">重置</el-button>
      <el-button type="primary" :icon="Edit" :size="size" @click="handelExport">导出</el-button>
    </div>
    <div class="container">
      <el-table :data="tableData" style="width: 100%" header-cell-class-name="table-header" v-loading="loading"
        :header-cell-style="headerStyle" :size="size">
        <el-table-column prop="checkDate" label="检测日期" />
        <el-table-column prop="name" label="检测结果">
          <template #default="scope">
            <span v-if="scope.row.checkResult==0">异常</span>
            <span v-else-if="scope.row.checkResult==1">正常</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="是否更换">
          <template #default="scope">
            <span v-if="scope.row.replace==0">否</span>
            <span v-else-if="scope.row.replace==1">是</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-text @click="handelConfirmFun(scope.$index, scope.row,'确定删除消毒液检测记录？',handelDelete)" type="primary"
              class="pointer">删除</el-text>
          </template>
        </el-table-column>
      </el-table>
      <div class="mar-t-20">
        <el-pagination layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange"
          v-model:current-page="page.page" :hide-on-single-page="showPage" />
      </div>
    </div>

    <el-drawer v-model="editVisible" direction="rtl" :append-to-body="true" title="新增记录"
      @closed="resetForm(ruleFormRef)">

      <template #default>
        <el-form :model="form" label-width="100px" :rules="rules" ref="ruleFormRef" label-position="left" :size="size">
          <el-form-item label="检测日期" prop="checkDate">
            <el-date-picker v-model="form.checkDate" type="date" placeholder="请选择检测日期" :size="size"
              value-format="YYYY-MM-DD" style="width:100%" />
          </el-form-item>
          <el-form-item label="操作人" prop="operator">
            <el-input v-model.trim="form.operator" :size="size" show-word-limit maxlength="20" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="检测结果" prop="checkResult">
            <el-select v-model="form.checkResult" placeholder="请选择" class="widall" :size="size">
              <el-option label="正常" :value="1" />
              <el-option label="异常" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否更换" prop="replace">
            <el-select v-model="form.replace" placeholder="请选择" class="widall" :size="size">
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="editVisible=false" size="large">返回</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)" size="large">完成</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<style lang="scss">
  @import "@/assets/mixin/css/tablePublic";
</style>